<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name='format-detection' content='telephone=no' />
<title>人车人</title><link rel="icon" href="/assets/img/titleico.ico" type="image/x-icon">
<link rel="stylesheet" href="/assets/css/common.css" />
<link rel="stylesheet" href="/assets/css/iconfont/iconfont.css" />
<style>

	header {
		height: 40px;
		background-color: #fff;
		overflow: hidden;
		position: relative;
	}
	
	header h2 {
		text-align: center;
		color: #4d4d4d;
		line-height: 40px;
		font-weight: normal;
		font-size: 18px;
	}
	
	header .icon {
		height: 100%;
		position: absolute;
		top: 0;
		-webkit-align-items: center;
		align-items: center;
		padding: 0 19px;
	}
	
	header .icon a {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	
	header .icon.left {
		left: 0;
	}
	
	header .icon.right {
		right: 0;
	}
	
	body {
		background-color: #fff;
	}
	
	#show-template {
		background-color: rgba(0, 0, 0, .8);
	}
	
	.show-template i,.show-template p {
		position: absolute;
		color: #fff;
		font-size: 8rem;
		top: 10%;
		right: 3%;
	}
	
	.show-template p {
		width: 70%;
		font-size: 1.8rem;
		top: 27%;
		right: 50%;
		margin-right: -35%;
	}
	
	section {
		border-top: 8px solid #f2f2f2;
	}
	
	section .container {
		padding: 0 18px;
		overflow: hidden;
	}
	
	section .container ul li {
		-webkit-align-items: center;
		align-items: center;
		height: 53px;
	}
	
	section .container ul li img {
		width: 16px;
		height: 16px;
		margin-right: 9px;
	}
	
	section .container ul li p {
		font-size: 15px;
		color: #333;
	}
	
	section .container ul li.allsel {
		height: 30px;
	}
	
	section .container ul li.allsel p {
		color: #666;
	}
	
	section .container .download {
		display: block;
		margin: 21px auto;
		width: 98%;
		height: 36px;
	}
	
</style>

</head>
<body>
	<header class="b_bor">
		<div class="icon left flexbox" id="back"><img src="/assets/img/back2@2x.png" width="10" /></div>
		<h2>合同下载</h2>
		<div class="icon right flexbox"><a href="/userCenter"></a><img src="/assets/img/order_user.png" width="20" /></div>
	</header>
	#@loadContainer()
	<div id="show-template" class="show-template trans">
		<i class="iconfont">&#xe655;</i>
		<p>点击右上角，选择在浏览器中打开即可正常下载</p>
	</div>
	<section id="app" class="visiblecon sectrans">
		<div class="container t_bor">
			<ul class="ulcon" id="ulcon"></ul>
			<img class="download" id="download" src="/assets/img/download.png" />
		</div>
	</section>

	<!-- footer start -->
	#--#@footer(2)--#
	<!-- end footer -->
	
	<script src="/assets/js/jquery-3.1.1.min.js"></script>
	<script src="/assets/js/fastclick.min.js"></script>
	<script src="/assets/js/xxsg.js"></script>
	<script src="/assets/js/axios.min.js"></script>
	<script id="mainjs">
    	$(function(){
    		var templateDom = $("#show-template"),
    			ulcon = $("#ulcon")
    			
    		function showSuc(){
    			$("#app").removeClass("visiblecon");
    			$("#load-container").removeClass("load7");
        	}
    		
    		axios.post("/bargain/getContractList")
    		.then(function(res){
    			console.log(res.data.dataList)
    			if (res.data.code == 1) {
    				renderHTML(res.data)
    			} else {
    				$("#app").children(".container").html("<p style='margin-top: 15%;text-align: center;'>" + res.data.msg + "</p>")
    			}
    			showSuc()
    		})
    		
    		function renderHTML (data) {
    			var html = ""
    			for (var i = 0; i < data.length; i++) {
    				var name = data[i].name.substring(0, data[i].name.indexOf("."))
    				html += "<li class='flexbox b_bor' path='"+ data[i].name +"'>"+
							"	<img src='/assets/img/duoxuan1.png' />"+
							"	<p>"+ name +"</p>"+
							"</li>"
    			}
    			
    			html += "<li class='allsel flexbox'>"+
						"	<img src='/assets/img/duoxuan1.png' />"+
						"	<p>全选</p>"+
						"</li>"
    			
    			ulcon.html(html)
    		}
    		
    		ulcon.on("click","li",function(){
    			var that = $(this),
    				icon = that.children("img")
    			if (that.hasClass("allsel")) {
    				if (that.hasClass("select-hook")) {
    					icon.attr("src", "/assets/img/duoxuan1.png")
    					that.removeClass("select-hook")
    					selected(false)
    				} else {
    					icon.attr("src", "/assets/img/duoxuan2.png")
    					that.addClass("select-hook")
    					selected(true)
    				}
    			} else {
    				if (that.hasClass("select-hook")) {
    					icon.attr("src", "/assets/img/duoxuan1.png")
    					that.removeClass("select-hook")
    				} else {
    					icon.attr("src", "/assets/img/duoxuan2.png")
    					that.addClass("select-hook")
    				}
    			}
    		})
    		
    		function selected (type) {
    			ulcon.find("li").each(function(){
    				var that = $(this),
    					icon = that.children("img")
    				if (!that.hasClass("allsel")) {
    					if (type) {
    						icon.attr("src", "/assets/img/duoxuan2.png")
        					that.addClass("select-hook")
    					} else {
    						icon.attr("src", "/assets/img/duoxuan1.png")
        					that.removeClass("select-hook")
    					}
    				}
    			})
    		}
    		
    		$("#download").click(function(){
    			if(is_weixin()){
    				templateDom.addClass("visible")
    			}else{
    				var data = {}
    				ulcon.find("li.select-hook").each(function(){
    					var that = $(this),
    						path = that.attr("path")
    					if (!that.hasClass("allsel")) {
    						data[path] = "sure"
    					}
    				})
    				
    				if (_x.isEmptyObj(data)) {
    					return
    				}
    				
	    			axios.post("/bargain/downLoad", _x.qsStringify(data))
	    			.then(function(res){
	    				console.log(res)
	    				if(res.data.code == "1"){
	    					_x.showTip("下载成功！")
		    				window.location.href = res.data.msg
	    				}else{
	    					_x.showTip(res.data.msg)
	    				}
	    			})
	    			.catch(function(){
	    				_x.showTip("下载失败，请稍后重试！")
	    			})
    			}
    		})
    		
    		//判断是否是微信浏览器
    		function is_weixin(){
    			var ua = navigator.userAgent.toLowerCase()
    			if(ua.match(/MicroMessenger/i)=="micromessenger") {
    				return true
    		 	} else {
    				return false
    			}
    		}
    		
    		//关闭
           	templateDom.on("click",function(e){
           		$(this).removeClass("visible");
           		$(this).children(".loading").removeClass("animatie").hide()
           	})
        
    	})
    </script>
</body>
</html>